
import { useNavigate } from 'react-router-dom'
import { Form, Button, Input, Select, Col, Avatar, message } from 'antd'
import { HomeFilled } from '@ant-design/icons'
import './Addorg.scss'
import { addOrg } from '../../../../api/Datas'
import { useState } from 'react'
interface Props {

}

function Addorg(props: Props) {
    const { TextArea } = Input;
    const [messageApi, contextHolder] = message.useMessage()
    const navigate = useNavigate()

    // 提交表单 - 新增机构
    const onFinish = async (values: any) => {
        console.log(values)
        addOrg({ ...values,mechanismPicture: 'https://cdn7.axureshop.com/demo/1881228/images/%E6%9C%BA%E6%9E%84%E7%AE%A1%E7%90%86/u5251.png', mechanismState: true }).then(res => {
            console.log(res)
            if (res.data.code == 200) {
                message.success({content:'新增成功'})
                setTimeout(() => {
                    navigate(-1)
                }, 1000)
            }

        })

    };
    // 提交失败
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    // 文件发生改变的时候
    // var onFileChange = (e: any) => {
    //     // 获取到选择的文件信息--e.target.files[0]
    //     // 将文件对象转换为base64编码后的字符串
    //     // FileReader专门负责读取文件内容，转换为其他格式
    //     var reader = new FileReader()
    //     // readAsDataURL:转换为base64格式，返回值是空的
    //     reader.readAsDataURL(e.target.files[0])
    //     // 加载完成时this.result拿到的是所选中的文件的全部内容（以base64编码格式显示的字符串）
    //     reader.onload = function () {
    //         console.log(this.result)
    //         // setImg(this.result)
    //         // 3.给form里的img设置值
    //         form.setFieldValue('img', this.result)
    //     }
    // }
    return (
        <div className='addorg'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>新增机构信息</h3>
            </div>
            <h4>机构信息</h4>
            <Form
                {...layout}
                layout="inline"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Col span={8}>
                    <Form.Item
                        label="机构编号"
                        name="mechanismId"
                    >
                        <span className='jsonid'>自动生成</span>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="机构名称"
                        name="mechanismName"
                        rules={[{ required: true, message: '请填写机构名称' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="机构图片"
                        name="mechanismPicture"
                        rules={[{ message: '请选择机构图片' }]}
                    >
                        {/* <Input type='file' onChange={onFileChange} /> */}
                        <div className="avatorbox">

                            <Avatar shape="square" src='https://cdn7.axureshop.com/demo/1881228/images/%E6%9C%BA%E6%9E%84%E7%AE%A1%E7%90%86/u5251.png' />
                            {/* <a >+点击上传</a> */}
                        </div>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="负责人姓名"
                        name="mechanismChargename"
                        rules={[{required: true, message: '请填写负责人姓名' }]}
                    >
                        <Input placeholder='请输入负责人姓名' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="联系电话"
                        name="mechanismTelephone"
                        rules={[{ required: true,message: '请输入联系电话' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={8}></Col>
                <Col span={8}>
                    <Form.Item
                        label="机构地址"
                        name="mechanismAddress"
                        rules={[{ required: true, message: '请填写机构地址' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={16}></Col>
                <Col span={8}>
                    <Form.Item
                        label="机构介绍"
                        name="mechanismIntroduce"
                    >
                        <TextArea rows={4} placeholder='请填写机构介绍' />
                    </Form.Item>
                </Col>
                <Col span={16}></Col>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        新增
                    </Button>
                </Form.Item>
            </Form>
            {contextHolder}
        </div>
    );
}

export default Addorg;